<template>
	<div class="tobeDone">
		<el-tabs
			v-model="state.activeName"
			v-loading="state.loading"
			class="demo-tabs"
			@tab-change="handleClick"
		>
			<el-tab-pane label="项目类型" name="1"></el-tab-pane>
			<el-tab-pane label="决策会议" name="0"></el-tab-pane>
		</el-tabs>

		<tableIndex
			:tableData="state.activeName == 1 ? tableData : tableData2"
			:tableHead="state.activeName == 1 ? tableHead : tableHead2"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="state.fields"
			:height="500"
			:page="page"
			ref="tableIndexRef"
			@selectChange="selectChange"
			@searchList="searchList"
			@page-change="pageChange"
		>
			<template #right-btn>
				<div style="float: right" v-show="state.activeName == 1">
					<el-button class="button_edit" size="small" plain @click="markReadHandler(1)"
						> 标记已读</el-button
					>
					<el-button
						size="small"
						plain
						class="button_edit"
						@click="markReadHandler(0)"
						> 全部已读</el-button
					>
				</div>
				<div style="float: right" v-show="state.activeName != 1">
					<el-button size="small" plain class="button_edit" @click="exportHandler()"
						><svg-icon icon-class="export" /> 导出</el-button
					>
				</div>
			</template>
			<template #operate>
				<el-table-column label="操作" min-width="100" align="center" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="button_view"
							type="primary"
							@click="lookHandler(row)"
							>查看</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
		<public-dialog
			:title="'任务详情'"
			:width="'40%'"
			v-model:visible="visible"
			@onConfirm="onConfirm"
			:confirmButtonTitle="'确认'"
		>
			<el-form
				:inline="true"
				v-if="state.activeName == 1"
				:model="formInline"
				class="demo-form-inline"
				disabled
			>
				<el-form-item label="项目名称">
					<el-input v-model="formInline.projectName" placeholder="" />
				</el-form-item>
				<el-form-item label="任务类型">
					<el-input v-model="formInline.meetingType" placeholder="" />
				</el-form-item>
				<el-form-item label="任务内容">
					<el-input
						v-model="formInline.meetingName"
						type="textarea"
						placeholder=""
					/>
				</el-form-item>
				<el-form-item label="通知时间">
					<el-input v-model="formInline.dateTime" placeholder="" />
				</el-form-item>
			</el-form>

			<!-- 会议 -->
			<el-form
				:inline="true"
				v-else
				:model="formInline"
				class="demo-form-inline"
				label-width="100px"
				disabled
			>
				<el-form-item label="所属项目">
					<el-input v-model="formInline.projectName" placeholder="" />
				</el-form-item>
				<el-form-item label="所属部门">
					<el-input v-model="formInline.departmentName" placeholder="" />
				</el-form-item>
				<el-form-item label="申请人">
					<el-input v-model="formInline.createUserName" placeholder="" />
				</el-form-item>
				<el-form-item label="议题名称">
					<el-input v-model="formInline.meetingName" placeholder="" />
				</el-form-item>
				<el-form-item label="会议时间">
					<el-input v-model="formInline.dateTime" placeholder="" />
				</el-form-item>
				<!-- <el-form-item label="审批部门">
					<el-input v-model="formInline.user" placeholder="" />
				</el-form-item>
				<el-form-item label="审批人">
					<el-input v-model="formInline.user" placeholder="" />
				</el-form-item> -->
				<el-form-item label="审批">
					<el-input  :placeholder="['','审核中','已通过','已驳回'][formInline.examineStatus] || '-'" />
				</el-form-item>
				<el-form-item label="意见">
					<el-input
						type="textarea"
						:placeholder="formInline.opinion"
					/>
				</el-form-item>
			</el-form>
		</public-dialog>
	</div>
</template>

<script setup>
import tableIndex from "@/components/table/index.vue";
import { homeToDoPage } from "@/api/project";
import { consoleApi } from "@/api/investment";
import PublicDialog from "@/components/PublicDialog.vue";
import { ref, onMounted, reactive, watch } from "vue";
import { ElMessage, ElTabPane, ElTabs, ElForm } from "element-plus";
import { useRouter } from "vue-router";
import { exportExcelFile } from "@/common/utils/GlobalUtils";
components: {
	tableIndex;
}


const visible = ref(false);
const formInline = ref({});
const tableData = ref([]);
const tableData2 = ref([]);
const tableHead2 = ref([
	{
		prop: "meetingId",
    label: "会议ID",
    minWidth: 100,
	},
	{
		prop: "meetingName",
    label: "会议名称",
    minWidth: 100,
	},
	{
		prop: "dateTime",
    label: "会议时间",
    minWidth: 100,
	},
	{
		prop: "createUserName",
    label: "申请人",
    minWidth: 100,
	},
	{
		prop: "departmentName",
    label: "所属部门",
    minWidth: 100,
	},
	{
		prop: "createTime",
    label: "创建时间",
    minWidth: 100,
	},
	{
		prop: "createUserName",
    label: "创建人",
    minWidth: 100,
	},
]);
const tableHead = ref([
	{
		prop: "msgContent",
		label: "任务类型",
		minWidth: 120,
		formatter: (row) => {
			let str = "";
			switch (row.msgContent.jobType) {
				case 1:
					str = "任务指派";
					break;
				case 2:
					str = "质量监督巡检";
					break;
				case 3:
					str = "节点前置/后置";
					break;
				case 4:
					str = "任务预警/督办";
					break;
				case 5:
					str = "项目任务审核";
					break;

				default:
					break;
			}
			return str;
		},
	},
	{
		prop: "projectName",
		label: "项目名称",
		minWidth: 180,
		formatter: (row) => {
			return row.msgContent.projectName;
		},
	},
	{
		prop: "createTime",
    label: "时间",
    minWidth: 150,
	},
	{
		prop: "status",
    label: "状态",
    minWidth: 100,
		formatter: (row) => {
			let str = "";
			switch (row.status) {
				case -1:
					str = "未读";
					break;
				case 1:
					str = "已读";
					break;

				default:
					break;
			}
			return str;
		},
	},
]);
const state = reactive({
	options: [],
	fields: [
		{
			key: "jobType",
			label: "任务类型",
			type: "select",
			options: {
				list: [
					{
						value: 1,
						label: "任务指派",
					},
					{
						value: 2,
						label: "质量监督巡检",
					},
					{
						value: 3,
						label: "节点前置/后置",
					},
					{
						value: 4,
						label: "任务预警/督办",
					},
					{
						value: 5,
						label: "项目任务审核",
					},
				],
			},
		},
		{
			key: "projectName",
			label: "项目名称",
			type: "input",
			placeholder: "项目名称关键字搜索",
		},
	], //查询条件
	activeName: "1",
	loading: false,
	checkList: [],
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
});

watch(
	() => visible.value,
	(val) => {
		if (!val) {
			formInline.value = {};
		}
	},
	{ immediate: true }
);

//选中变化
const selectChange = (e) => {
	state.checkList = e;
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;

	getPage();
};
//搜索查询
const searchList = (e) => {
	if (state.activeName == 1) {
		getPage(e);
	} else {
		meetingPage(e);
	}
};
const markReadHandler = async (val) => {
	let obj = {
		msgIds: [],
	};
	if (val) {
		if (state.checkList?.length > 0) {
			obj.msgIds = [...state.checkList.map((item) => item.msgId)];
		} else {
			return ElMessage.warning("请选择要标记的数据");
		}
		//全部已读
	} else {
		//标记已读
		obj.msgIds = [];
	}
	await homeToDoPage.updateStatus({ msgIds: obj.msgIds }).then((res) => {
		if (res.code == 200) {
			getPage();
		}
	});
};
//获取分页信息
const getPage = async (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			...e,
			businessType: 5,
		},
	};
	await homeToDoPage.getMyProjectMsgPage(obj).then((res) => {
		if (res.code == 200) {
			state.loading = false;
			state.page.total = res.data.total;
			tableData.value = res.data.content;
		}
	});
};
const handleClick = (e) => {
	switch (state.activeName) {
		case "1":
			state.fields = [
				{
					key: "jobType",
					label: "任务类型",
					type: "select",
					options: {
						list: [
							{
								value: 1,
								label: "任务指派",
							},
							{
								value: 2,
								label: "质量监督巡检",
							},
							{
								value: 3,
								label: "节点前置/后置",
							},
							{
								value: 4,
								label: "任务预警/督办",
							},
							{
								value: 5,
								label: "项目任务审核",
							},
						],
					},
				},
				{
					key: "projectName",
					label: "项目名称",
					type: "input",
					placeholder: "项目名称关键字搜索",
				},
			];
			break;
		case "0":
			state.fields = [
				{
					key: "keyword",
					label: "会议名称",
					type: "input",
					placeholder: "会议名称关键字搜索",
				},
				{
					key: "projectId",
					label: "项目",
					type: "select",
					options: {
						list: state.options,
					},
				},
			];
			break;

		default:
			break;
	}
};
let router = useRouter();
//查看任务信息
const lookHandler = (row) => {
	visible.value = true;

	if (state.activeName == 1) {
		formInline.value = { ...row };
		formInline.value.meetingType = [
			"",
			"任务指派",
			"质量监督巡检",
			"节点前置/后置",
			"任务预警/督办",
			"项目任务审核",
		][row.msgContent.jobType];
	} else {
		getManageView(row.meetingId);
	}
};
const meetingPage = (e) => {
	consoleApi
		.meetingPage({
			pageNum: state.page.page,
			pageSize: state.page.pageSize,
			param: {
				...e,
			},
		})
		.then((res) => {
			if (res.code == 200) {
				tableData2.value = res.data.content;
			}
		});
};

const onConfirm = (row) => {
	visible.value = false;
};
// 项目下拉
const getList = () => {
	consoleApi.projectInvestment({}).then((res) => {
		if (res.code == 200) {
			state.options = res.data.map((v) => {
				return {
					value: v.projectId,
					label: v.projectName,
				};
			});
		}
	});
};

const getManageView = (key) => {
	consoleApi.getManageView(key).then((res) => {
		if (res.code == 200) {
			formInline.value = res.data;
		}
	});
};

const tableIndexRef = ref(null);
const exportHandler = () => {
	consoleApi
		.export({
			...tableIndexRef.value.getSearchData(),
		})
		.then((res) => {
			exportExcelFile(res, "决策会议");
		});
};
onMounted(() => {
	getPage();
	meetingPage();
	getList();
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}
.el-form-item {
	width: 100%;
}
</style>
